<template>
	<view class="apply-install">
		<view class="title uni-h5">客户收款信息：（*为必填项）</view>
		<view class="form">
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">*付款人</text>
				<input
					class="form-cell-value"
					type="text"
					:value="payName"
					data-name="payName"
					placeholder="请输入付款人"
					@input="inputChange" />
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">*手机号</text>
				<input
					class="form-cell-value"
					type="number"
					:value="payPhone"
					data-name="payPhone"
					placeholder="请输入手机号"
					@input="inputChange" />
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">付款方式</text>
				<radio-group class="invoice-con-detail-item-value" @change="bindTypeChange">
					<label class="radio">
						<radio value="1" :checked="payType === 1" />
						微信
					</label>
					<label class="radio">
						<radio value="2" :checked="payType === 2" />
						支付宝
					</label>
					<label class="radio">
						<radio value="3" :checked="payType === 3" />
						现金
					</label>
				</radio-group>
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">*账号</text>
				<input
					class="form-cell-value"
					type="text"
					:value="payAccount"
					data-name="payAccount"
					placeholder="请输入账号"
					@input="inputChange" />
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">金额</text>
				<input
					class="form-cell-value"
					type="number"
					:value="payAmount"
					data-name="payAmount"
					placeholder="请输入金额"
					@input="inputChange" />
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">用途</text>
				<input
					class="form-cell-value"
					type="text"
					:value="uses"
					data-name="uses"
					placeholder="请输入用途"
					@input="inputChange" />
			</view>
			<view class="cert-add-tit">*附件（付款凭证）</view>
			<view class="cert-add-upload">
				<button v-if="!licenseImgUrl" class="cert-add-button" @click="uploadImage">点击上传图片</button>
				<image
					v-else
					class="cert-add-upload-img"
					:src="licenseImgUrl"
					mode="aspectFill"
					@click="uploadImage">
				</image>
				<view class="cert-add-upload-notice">
					请确保上传的照片边框完整、字体清晰、亮度均匀
				</view>
			</view>
		</view>
		<view class="submit-btn">
			<button @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				payType: 1, // 支付方式
				payName: '', // 收款人名称
				payPhone: null, // 收款人电话
				payAccount: null,	// 账号
				payAmount: null, // 金额
				uses: '', // 用途
				order_no: null,	// 订单号
				licenseImgUrl: '', // 附件图片
			}
		},
		onLoad(option) {
			this.order_no = option.order_no;
		},
		methods: {
			/**
			 * 申请退款
			 * @param {String} order_no，remark
			 */
			async submit() {
				if (!this.checkPayName()) return false
				if (!this.checkPayPhone()) return false
				if (!this.checkPayAccount()) return false
				if (!this.checkLicenseImgUrl()) return false
				let body = {
					payName: this.payName,
					payPhone: this.payPhone,
					payAccount: this.payAccount,
					payType: this.payType,
					money: this.payAmount,
					uses: this.uses,
					licenseImgUrl: this.licenseImgUrl
				}
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/pay',
					data: {
						order_no: this.order_no,
						pay_way: 5, //支付类型 1支付宝 2微信 3对公转账 4他人支付 5线下付款 （默认微信支付，兼容以前没有传支付类型）
						offline: body
					}
				})
				if (res.status === 1) {
					this.pageTo('/pages/index/payResult?result=1')
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 上传图片
			 */
			uploadImage() {
				uni.chooseImage({
					count: 1, //默认9
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: this.$baseUrl + '/api/upload/picture',
							filePath: tempFilePaths[0],
							name: 'images',
							header: {
								'content-type': 'multipart/form-data',
								'token': uni.getStorageSync('USER_INFO').token || '',
								'way': 'app',
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data)
								this.licenseImgUrl = this.$baseUrl + uploadFileRes.data
							},
							fail: (err) => {
								uni.showToast({
									title: '上传失败' + err,
									icon: 'none'
								})
							}
						});
					}
				});
			},
			/**
			 * 校验收款人名称
			 */
			checkPayName() {
				if (this.payName.trim() === "") {
					uni.showToast({
						title: '付款人不能为空',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/**
			 * 校验手机号
			 */
			checkPayPhone() {
				if (!(/^1[3456789]\d{9}$/.test(this.payPhone))){
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/**
			 * 校验账号
			 */
			checkPayAccount() {
				if (!this.payAccount){
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/**
			 * 校验附件
			 */
			checkLicenseImgUrl() {
				if (this.licenseImgUrl === '') {
					uni.showToast({
						title: '请上传附件',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/** 
			 * 选择支付方式
			 */
			bindTypeChange(e) {
				this.payType = Number(e.target.value)
			},
			inputChange(e) {
				this[e.target.dataset.name] = e.detail.value
			},
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.apply-install{
		padding-top: 20rpx;
		.title{
			padding-left: 40rpx;
		}
		.form{
			padding: 0 30rpx;
			background: $uni-bg-color;
			&-cell{
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&:last-child{
					border-bottom: none;
				}
				&-name{
					width: 200rpx;
					color: $uni-text-color-grey2;
				}
				&-value{
					text-align: right;
				}
			}
		}
		.after-sale-phone{
			margin-top: 100rpx;
			text-align: center;
			.tit{
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm1;
			}
			.con{
				font-size: $uni-font-size-sm2;
			}
		}
		.submit-btn{
			padding: 0 30rpx;
		}
		.radio{
			margin-right: 20rpx;
		}
		.cert-add-upload{
			padding: 40rpx;
			.cert-add-upload-img{
				width: 426rpx;
				height: 252rpx;
				display: block;
				margin: 20rpx auto;
				background: $uni-bg-color-grey2;
				
			}
			.cert-add-upload-notice{
				text-align: center;
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm1;
			}
			.cert-add-button{
				width: 200rpx;
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}
		}
	}
		
</style>